<template>
  <div class="register">
  <form
    action="#"
  >
    <div class="username">
      <div><label for="username"><span>账号:</span></label>
        <input
          type="text"
          placeholder="请输入邮箱号"
          id="username"
          name="username"
          v-validate ="'required|username'"
          v-model="user.username"
        ></div>
      <span
        class="error-info error-username"
        v-show="errors.has('username')"
      >
          {{ errors.first("username") }}
        </span>
    </div>
    <div class="password">
      <div><label for="password"><span>密码:</span></label>
        <input
          type="password"
          placeholder="请输入密码"
          id="password"
          name="password"
          v-validate ="'required|password'"
          v-model="user.password"
        ></div>
      <span
        class="error-info error-username"
        v-show="errors.has('password')"
      >
          {{ errors.first("password") }}
        </span>
    </div>
    <div class="confirm-password">
      <div>
        <label for="confirmPassword"><span>确认:</span></label>
        <input
          type="password"
          placeholder="请确认密码"
          id="confirmPassword"
          name="confirmPassword"
          v-validate ="{required : true ,confirmPassword: user.password}"
        >
      </div>
      <span
        class="error-info error-confirm-password"
        v-show="errors.has('confirmPassword')"
      >
          {{ errors.first("confirmPassword") }}
        </span>
    </div>

    <div class="check-code">
      <div>
        <label for="checkCode"><span>验证码:</span></label>
        <input
          type="text"
          placeholder="请输入验证码"
          id="checkCode"
          name="checkCode"
          v-validate ="{required : true , checkCode : getCheckCode}"
          v-model="user.checkCode"
        >
        <a class="get-check-code">获取验证码</a>
      </div>
      <span
        class="error-info error-username"
        v-show="errors.has('checkCode')"
      >
          {{ errors.first("checkCode")}}
        </span>
    </div>

    <button type="button" @click="submit">注册</button>
    <div class="user-prompt">
      <p
        class="user-prompt-color"
        @click="$emit('switch', 'login')"
      >
        已有账号登录
      </p>
    </div>
  </form>
</div>
</template>

<script>
  export default {
    name: 'register',
    data() {
      return {
        user : {
          username : "",
          password : "",
          checkCode : "",
        },
        getCheckCode : "nzq"
      }
    },
    methods : {
      // 表单提交的时候验证
      submit : function () {
        let that = this;
        this.$validator.validateAll().then((result)=>{
          // 这里默认成功  成功之后跳到Login  that.$emit('switch')
          if(!result){
            that.$emit('switch','login')
          }
        })
      }
    },
    mounted() {
    }
  }
</script>

<style scoped>
  @import '../../../../../../assets/css/loginRegister.css';
  form button {
    margin-top: 30px;
  }
</style>
